import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, List, Toast} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';

import {getPackageItemListApi} from '~/api/order';
import {getHttpUrl} from '~/api/basic';
export default class GiftList extends Component {
    static navigationOptions = {
        title: '套餐列表',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('params'),
            list: [],
            baseurl: '',
        };
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });
        getPackageItemListApi({
            order_id: this.state.id,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                });
            } else {
                Toast.info(r.msg);
            }
        });

        console.disableYellowBox = true;
    } //
    render() {
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView style={{flex: 1}}>
                    {/* <Flex
                        style={{
                            width: '96%',
                            marginLeft: '2%',
                            marginRight: '2%',
                            marginTop: 10,
                        }}>
                        <Image
                            style={{
                                width: '100%',
                                aspectRatio: 1 / 0.35,
                            }}
                            source={require('~/assets/public/giftimage.png')}
                        />
                    </Flex> */}

                    {this.state.list.map((item) => {
                        return (
                            <View
                                style={{
                                    marginTop: 10,
                                    backgroundColor: 'white',
                                    height: 95,
                                    padding: 10,
                                    borderRadius: 5,
                                    width: '96%',
                                    marginLeft: '2%',
                                    marginRight: '2%',
                                }}>
                                <Flex>
                                    <Flex
                                        style={{width: '80%'}}
                                        onPress={() => {
                                            this.props.navigation.push('GiftInfo', {
                                                params: item.ProductDataID,
                                            });
                                        }}>
                                        <Image
                                            style={{
                                                width: '20%',
                                                height: 75,
                                                padding: 10,
                                                resizeMode: 'contain',
                                            }}
                                            source={{
                                                uri: this.state.baseurl + '/Product/' + item.ProductDataID + '/3/' + item.FileName,
                                            }}
                                        />
                                        <Flex direction="column" align="start" style={{padding: '3%', width: '80%'}}>
                                            <Text numberOfLines={1} style={{fontSize: 20}}>
                                                {item.ProductName}
                                            </Text>
                                            <Text
                                                style={{
                                                    paddingRight: 50,
                                                    fontSize: 20,
                                                    color: '#EC4F46',
                                                }}>
                                                {item.PriceMarketTotal}元
                                            </Text>
                                        </Flex>
                                    </Flex>
                                    {/* <Flex
                                        direction={'column'}
                                        align={'center'}
                                        onPress={() => {
                                            this.props.navigation.push('GiftMoreList', {
                                                productParamID: item.ProductParamID,
                                            });
                                        }}
                                        style={{width: '20%', borderLeftWidth: 0.5, borderColor: '#d3d3d3', height: '100%', paddingTop: '4%'}}>
                                        <Image style={{width: 24, height: 24}} source={require('~/assets/public/giftmore.png')} />
                                        <Text style={{width: '100%', height: 40, textAlign: 'center', color: '#d3d3d3', fontsize: 12}}>更多选择</Text>
                                    </Flex> */}
                                </Flex>
                            </View>
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({});
